<template>
  <div class="app">
    <div class="role-header">
      <el-button size="small" class="header-but" @click="addRole">
        添加角色
      </el-button>
    </div>
    <div class="role-main">
      <el-table :data="dataRender" class="table">
        <el-table-column prop="name" label="角色">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.isEdit"
              v-model="scope.row.copyData.name"
              type="text"
            />
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="启用">
          <template slot-scope="scope">
            <div v-if="scope.row.isEdit">
              <el-switch
                v-model="scope.row.copyData.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
              />
            </div>
            <span v-else>
              {{ scope.row.state ? "已启用" : "未启用" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述">
          <template slot-scope="scope">
            <el-input
              v-if="scope.row.isEdit"
              v-model="scope.row.copyData.description"
              type="textarea"
            />
            <span v-else>{{ scope.row.description }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.isEdit">
              <el-button type="warning" @click="confirmEdit(scope)">
                确认
              </el-button>
              <el-button type="info" @click="cancelEdit(scope)">
                取消
              </el-button>
            </div>
            <div v-else>
              <el-button
                type="text"
                size="small"
                class="main-button"
                @click="assignPermission(scope)"
              >分配权限</el-button>
              <el-button
                type="text"
                size="small"
                class="main-button"
                @click="editListDate(scope)"
              >编辑</el-button>
              <el-button
                type="text"
                size="small"
                class="main-button"
                @click="delListData(scope)"
              >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="role-footer">
      <el-row type="flex" justify="end" align="bottom">
        <el-pagination
          :page-size="pagingData.pageSize"
          :page-count="pagingData.total"
          :current-page="pagingData.page"
          :pager-count="5"
          layout="prev, pager, next"
          :total="pagingData.total"
          @current-change="pageChange"
        />
      </el-row>
    </div>
    <Drawer :drawer.sync="drawer" :role-id="roleId" :perm-ids="permIds" @pushPermIds="pushPermIds" />
    <small-dialog :visible.sync="visible" @getTableList="getTableList" />
  </div>
</template>

<script>
// 封装API
// 创建弹框
// 弹框内创建表单
// 获取数据
// 表单验证
// 调用接口， 发送请求
// 响应提示， 清空表单， 关闭弹框， 刷新数据

// 分配权限
// 封装弹出层， 封装API
// 调用分配权限API
// 使用tree组件， 展示权限列表
import { delRoleAPI, getRoleDetails, getRolesAPI, putRoleAPI } from '@/api/role'
import smallDialog from './components/small-dialog.vue'
import Drawer from './components/drawer.vue'
export default {
  name: 'Roles',
  components: { smallDialog, Drawer },
  data() {
    return {
      /**
       * 弹框
       */
      visible: false,
      // 列表数据
      tableData: [],
      // 分页数据
      pagingData: {
        page: 1,
        pageSize: 5,
        total: 0
      },
      drawer: false,
      // 分配权限点数据
      permIds: [],
      // 表单数据
      form: {
        name: '',
        description: '',
        state: ''
      },
      // 角色Id
      roleId: ''
    }
  },

  computed: {
    // 依赖数据变化添加响应式数据
    dataRender() {
      this.tableData.forEach((item) => {
        // set方法， 用于给对象添加响应式数据
        this.$set(item, 'isEdit', false)
        // 备份一份数据
        this.$set(item, 'copyData', {
          name: item.name,
          description: item.description,
          state: item.state + ''
        })
      })
      return this.tableData
    }
  },
  created() {
    this.getTableList()
  },
  methods: {
    // 获取表格列表
    async getTableList() {
      const { data } = await getRolesAPI(this.pagingData)
      if (this.pagingData.page && data.rows === null) {
        this.pagingData.page--
        this.getTableList()
      }
      this.tableData = data.rows
      this.pagingData.total = data.total
    },
    // 分配权限设置
    async assignPermission({ row }) {
      const result = await getRoleDetails(row.id)
      this.permIds = result.data.permIds
      this.roleId = row.id
      this.drawer = true
    },
    // 页码变更
    pageChange(page) {
      this.pagingData.page = page
      this.getTableList()
    },
    // 点击打开dialog
    addRole() {
      this.visible = true
    },
    // 删除
    async delListData(scope) {
      // 二次询问
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      // findIndex获取对应的索引
      const index = this.tableData.findIndex(
        (item) => item.id === scope.row.id
      )
      // 发送请求
      await delRoleAPI(scope.row.id)
      // 删除数组数据
      this.tableData.splice(index, 1)
      // 刷新页面
      this.getTableList()
    },
    // 编辑
    editListDate({ row, $index }) {
      row.isEdit = true
    },
    // 取消编辑
    cancelEdit({ row }) {
      row.copyData = {
        name: row.name,
        description: row.description,
        state: row.state
      }
      row.isEdit = false
    },
    // 确认编辑
    async confirmEdit({ row }) {
      await putRoleAPI(row.id, row.copyData)
      Object.assign(row, row.copyData)
      this.getTableList()
    },
    // 分配权限子传父数据
    pushPermIds(arrData) {
      this.permIds = arrData
    }
  }
}
</script>

<style lang="scss" scoped>
.app {
  background-color: #fff;
  padding: 15px;

  .role-header {
    position: relative;
    height: 60px;

    .header-but {
      position: absolute;
      top: 40%;
      left: 20px;
      transform: translateY(-50%);
      background-color: #6535f7;
      color: #fff;
      font-weight: bold;
      border-radius: 5px;

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .role-main {
    padding: 0 30px;
    > .table {
      font-size: 14px;
    }
  }

  .role-footer {
    padding-right: 20px;
    display: flex;
    align-items: end;
    justify-content: end;
    height: 40px;
  }
  .form-butBox {
    display: flex;
    justify-content: center;
    .butBox {
      transform: translateX(-25%);
    }
  }
}

::v-deep .el-dialog {
  border-radius: 10px;
}
::v-deep .el-textarea__inner {
  max-height: 150px;
}
</style>
